//模拟数据库
let user = [{ id: 1, zhuti: "", quyu: "", company: "河北开合", name: "张三", zhiwei: "总经理", phone: "14575234134", zhanghao: "正常", beizhu: "", time: "2021-09-09 12:12:12" },
{ id: 2, zhuti: "", quyu: "", company: "河北开合", name: "张三", zhiwei: "会计", phone: "18543665436", zhanghao: "冻结", beizhu: "", time: "2021-09-09 12:12:12" },
{ id: 3, zhuti: "", quyu: "", company: "河北开合", name: "张三", zhiwei: "总经理", phone: "122566576", zhanghao: "正常", beizhu: "", time: "2021-09-09 12:12:12" },
{ id: 4, zhuti: "", quyu: "", company: "河北开合", name: "张三", zhiwei: "总经理", phone: "18632577818", zhanghao: "正常", beizhu: "", time: "2021-09-09 12:12:12" },
{ id: 5, zhuti: "", quyu: "", company: "河北开合", name: "张三", zhiwei: "总经理", phone: "18632323456", zhanghao: "正常", beizhu: "", time: "2021-09-09 12:12:12" },
{ id: 6, zhuti: "", quyu: "", company: "河北开合", name: "张三", zhiwei: "总经理", phone: "18632381168", zhanghao: "正常", beizhu: "", time: "2021-09-09 12:12:12" },
{ id: 7, zhuti: "", quyu: "", company: "河北开合", name: "张三", zhiwei: "总经理", phone: "18632381168", zhanghao: "正常", beizhu: "", time: "2021-09-09 12:12:12" },
];
//声明区域
window.onload = function () {
  displayData();   //显示事件
  addBtn2Event();  //添加删除事件
  ad();
  getDate();
  // addZheEvent();
  // addBtnAddEvent();
  // frmAddClick();

}

//判断是否加载
function ad() {
  if (getDate().length == 0) {
    saveDate(user);
  }
}

// //阻止冒泡
// function frmAddClick() {
//   $(".Hxachaesi").click(function (e) {
//     e.stopPropagation();
//   });
// }
// function addBtnAddEvent() {
//   $("#xiugai").click(function () {
//     addModelShow();
//   });
// }
//存储到浏览器函数
function saveDate(data) {
  sessionStorage.setItem("user", JSON.stringify(data));
}
//浏览器里获取函数
function getDate() {
  let data = sessionStorage.getItem("user");
  if (data !== null) {
    return JSON.parse(data);
  } else {
    return [];
  }
}
// //弹出框
// function addZheEvent() {
//   $(".Hxachaesi").click(function () {
//     addModelHide();
//   });
// }
// function addModelHide() {
//   $(".Hxachaesi").removeClass("show");
//   $(".Hxachaesi").addClass("hide");
// }
// function addModelShow() {
//   $(".Hxachaesi").removeClass("hide");
//   $(".Hxachaesi").addClass("show");
// }
//文档碎片
function displayData() {
  $("#tbCard").html("")
  let fragment1 = document.createDocumentFragment();
  for (let i = 0; i < 5; i++) {
    let tr = document.createElement("tr");
    tr.innerHTML = `
           <td><input type="checkbox" id="cell"></td>                              
            <td>${user[i].id}</td>
            <td>${user[i].zhuti}</td>
            <td>${user[i].quyu}</td>
            <td>${user[i].company}</td>
            <td>${user[i].name}</td>
            <td>${user[i].zhiwei}</td>
            <td>${user[i].phone}</td>
            <td>${user[i].zhanghao}</td>
            <td>${user[i].beizhu}</td>
            <td>${user[i].time}</td>
            <td>
              <button class="btn1" id="xiugai" data-index='${user[i].id}'>编辑</button>
              <button class="btn2" data-index='${user[i].id}'>删除</button>
            </td>`

    fragment1.appendChild(tr);
  }
  $("#tbCard").append(fragment1);
}


// function onlouad(n, a) { //分页调用函数
//   $("#tbCard").html("")
//   //文档碎片
//   let fragment1 = document.createDocumentFragment();
//   for (let i = n; i < a; i++) {
//     let tr = document.createElement("tr");
//     tr.innerHTML = `
//            <td><input type="checkbox" id="cell"></td>
//             <td>${user[i].id}</td>
//             <td>${user[i].zhuti}</td>
//             <td>${user[i].quyu}</td>
//             <td>${user[i].company}</td>
//             <td>${user[i].name}</td>
//             <td>${user[i].zhiwei}</td>
//             <td>${user[i].phone}</td>
//             <td>${user[i].zhanghao}</td>
//             <td>${user[i].beizhu}</td>
//             <td>${user[i].time}</td>
//             <td>
//               <button class="btn1" id="xiugai" data-index='${user[i].id}'>编辑</button>
//               <button class="btn2" data-index='${user[i].id}'>删除</button>
//             </td>`

//     fragment1.appendChild(tr);
//   }
//   $("#tbCard").append(fragment1);
// }


//添加删除事件
function addBtn2Event() {
  $("#tbCard").on("click", ".btn2", function (e) {
    let id = $(e.target).attr("data-index");
    Btn2UserDatadById(id);
    displayData();
  })
}


//根据id，删除对应数组
function Btn2UserDatadById(id) {
  for (let i = 0; i < user.length; i++) {
    if (user[i].id == id) {
      user.splice(i, 1);
      break;
    }
  }
}




//添加
//获取新增标签对象
let btnCardtianjia = document.getElementById('btnCardtianjia');
let LaddModle = document.getElementById('addModle');
let ouserZhuti = document.getElementById("userZhuti").value;
let ouserQuyu = document.getElementById("userQuyu").value;
let ouserQiye = document.getElementById("userQiye").value;
let otextRenyuan = document.getElementById("textRenyuan").value;
let otextPhone = document.getElementById("textPhone").value;
let otextZhiwei = document.getElementById("textZhiwei").value;
let otextBeizhu = document.getElementById("textBeizhu").value;
//获取两个按钮
let oBtntianjia = document.getElementById('hxtianjia')
let oBtnQuxiao = document.getElementById("hxcell")

// 新增


btnCardtianjia.onclick = function () {
  addModle.style.display = 'block'
}
hxtianjia.onclick = function () {
  user.push({
    zhuti: ouserZhuti, quyu: ouserQuyu, company: ouserQiye,
    name: otextRenyuan, phone: otextPhone, zhiwei: otextZhiwei, beizhu: otextBeizhu, time: " ", zhanghao: '', id: ""

  });
  displayData();
  // paging();
  LaddModle.style.display = 'none';
}
oBtnQuxiao.onclick = function () {
  addModle.style.display = 'none'
}




// //修改
// //获取修改标签对象
// let btn1 = document.getElementsByClassName('btn1');
// let hxchasi = document.getElementById('hxchasi');
// let chassn = document.getElementById("chassn").value;
// let chasn = document.getElementById("chasn").value;
// let chasac = document.getElementById("chasac").value;
// let chasm = document.getElementById("chasm").value;
// let chasg = document.getElementById("chasg").value;
// //获取两个按钮
let xgcancel = document.querySelector('.xgcancel');
let baocun = document.querySelector(".baocun");

// //打开修改界面
// $("tbody").on("click", ".btn1", function () { //点击查看按钮触发的动作
//   $("#hxchasi").show();
// });


// baocun.onclick = function () {
  
//   // user.splice({
//   //   name: chassn, zhanghao: chasm,
//   //   phone: chasac, zhiwei: chasn, beizhu: chasg,
//   // });
//   // displayData();
// }
// baocun.onclick = function () {
//   hxchasi.style.display = 'none';
// }

// xgcancel.onclick = function () {
//   hxchasi.style.display = 'none';
// }

//修改
$("#tbCard").on("click", "#xiugai", function () {
  let hxchasi=document.getElementById('hxchasi');
  hxchasi.style.display = 'block';
  let id = $(this).attr("data-index");
  console.log(id);
  let data = getDate();
  $(".baocun").click(function () {
    hxchasi.style.display = 'none';
    let name = $("#chassn").val();
    let zhanghao = $("#chasm").val();
    let phone = $("#chasac").val();
    let zhiwei = $("#chasn").val();
    let beizhu = $("#chasg").val();
    
    console.log(data);
    for (let i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        data[i].name = name;
        data[i].zhanghao = zhanghao;
        data[i].phone = phone;
        data[i].zhiwei = zhiwei;
        data[i].beizhu = beizhu;
      }
      saveDate(data);
      // displayData();
    }
  });
});
let hxchasi=document.getElementById('hxchasi');
//数据修改的模态框隐藏
$("#hxchasi").on("click", ".xgcancel", function () {
  hxchasi.style.display = 'none';
});


// 分页
// paging();
// function paging() {
//   let page = 1;//第几页
//   let no = 0;//显示的页数的第一个对象是数组中的第几个对象，初始下标为0
//   let serialNumber = user.length;//序号
//   onlouad(0, 5)//初始页面信息，第一页
//   $("#inputPage").val(page);//页码


//   // 下一页
//   $("#nextpage").click(function () {
//     if (no + 5 < serialNumber) {//如果no+5小于数据条数
//       no += 5;
//       page++;
//       $("#inputPage").val(page);
//       if (serialNumber >= (no + 5)) {
//         onlouad(no, no + 5);
//       } else (
//         onlouad(no, serialNumber)

//       )
//     }

//   });

//   // 上一页
//   $("#lastpage").click(function () {
//     if (no - 5 >= 0) {
//       no -= 5;
//       page--;
//       $("#inputPage").val(page);
//       onlouad(no, no + 5);
//     }
//   });
//  }
//查询
function choice(obj) {
  console.log("obj",obj.value)
  let i = $(obj).val();
  if (i == 2) {
    let user = JSON.parse(sessionStorage.getItem("user"));
    console.log(user);
    console.log("进入冻结");
    showChoice(user);
    function showChoice(data) {
      $("#tbCard")[0].innerHTML = "";
      for (let i = 0; i < user.length; i++) {
        if (`${user[i].zhanghao}` == "冻结") {
          $(`#tbCard`)[0].innerHTML += `<tr>
          <td><input type="checkbox" id="cell"></td>                              
          <td>${data[i].id}</td>
          <td>${data[i].zhuti}</td>
          <td>${data[i].quyu}</td>
          <td>${data[i].company}</td>
          <td>${data[i].name}</td>
          <td>${data[i].zhiwei}</td>
          <td>${data[i].phone}</td>
          <td>${data[i].zhanghao}</td>
          <td>${data[i].beizhu}</td>
          <td>${data[i].time}</td>
          <td>
            <button class="btn1" id="xiugai" data-index='${data[i].id}'>编辑</button>
            <button class="btn2" data-index='${data[i].id}'>删除</button>
          </td>

    </tr>
          `;
        }
      }
    }
  } else if (i == 3) {
    let user = JSON.parse(sessionStorage.getItem("user"));
    console.log(user);
    console.log("进入正常");
    showChoice(user);
    function showChoice(data) {
      $("#tbCard")[0].innerHTML = "";
      for (let i = 0; i < user.length; i++) {
        if (`${user[i].zhanghao}` == "正常") {
          $(`#tbCard`)[0].innerHTML += `<tr>
          <td><input type="checkbox" id="cell"></td>                              
          <td>${data[i].id}</td>
          <td>${data[i].zhuti}</td>
          <td>${data[i].quyu}</td>
          <td>${data[i].company}</td>
          <td>${data[i].name}</td>
          <td>${data[i].zhiwei}</td>
          <td>${data[i].phone}</td>
          <td>${data[i].zhanghao}</td>
          <td>${data[i].beizhu}</td>
          <td>${data[i].time}</td>
          <td>
            <button class="btn1" id="xiugai" data-index='${data[i].id}'>编辑</button>
            <button class="btn2" data-index='${data[i].id}'>删除</button>
          </td>

      </tr>
          `;
        }
      }
    }
  }  else if (i == 1) {
    let messages = JSON.parse(sessionStorage.getItem("user"));
    console.log(messages);
    console.log("进入全部");
    showChoice(messages);
    function showChoice(data) {
      $("#tbCard")[0].innerHTML = "";
      for (let i = 0; i < messages.length; i++) {
        $(`#tbCard`)[0].innerHTML += `<tr>
        <td><input type="checkbox" id="cell"></td>                              
          <td>${data[i].id}</td>
          <td>${data[i].zhuti}</td>
          <td>${data[i].quyu}</td>
          <td>${data[i].company}</td>
          <td>${data[i].name}</td>
          <td>${data[i].zhiwei}</td>
          <td>${data[i].phone}</td>
          <td>${data[i].zhanghao}</td>
          <td>${data[i].beizhu}</td>
          <td>${data[i].time}</td>
          <td>
            <button class="btn1" id="xiugai" data-index='${data[i].id}'>编辑</button>
            <button class="btn2" data-index='${data[i].id}'>删除</button>
          </td>

    </tr>
          `;
      }
    }
  }
}